<template>
  <view>
    <heardData></heardData>
    <view class="content">
	  <view class="submit_btn">
		  <button type="primary" size="mini" @click="submitData">保存</button>
		  <button style="float: right;" type="" @click="goback" size="mini">返回</button>
	  </view>
	  <uni-forms ref="baseForm" :modelValue="dataForm" label-width="150">
	  	<view class="base_info">
			<uni-forms-item label="客户名称" >
				<uni-easyinput v-model="dataForm.khmc" suffixIcon="person" placeholder="请输入客户名称" />
			</uni-forms-item>
			<uni-forms-item label="手机号码">
				<uni-easyinput v-model="dataForm.khsj" suffixIcon="phone" placeholder="请输入手机号码" />
			</uni-forms-item>
			<uni-forms-item label="邮寄地址">
				<uni-easyinput v-model="dataForm.khdz" suffixIcon="location" placeholder="请输入邮寄地址" />
			</uni-forms-item>
			<uni-forms-item label="付款方式">
				<uni-data-select v-model="dataForm.fkfs" placeholder="请选择付款方式" :localdata="fkfsData"></uni-data-select>
			</uni-forms-item>
	  	</view>
		<view class="goods">
		  <view class="button-group">
			<button type="primary" size="mini" @click="addPro"><uni-icons type="plusempty" color='#fff'
				size="15"></uni-icons>新增商品</button>
		  </view>
		  <view class="goods-table">
			  <view class="heard">
				  <text>商品名称</text>
				  <text>商品图片</text>
				  <text>购买数量</text>
				  <text>邮寄地址</text>
			  </view>
			  <view v-if="dataForm.lstTbYOrderproduct.length !== 0">
				  <uni-swipe-action-item  v-for="(item, index) in dataForm.lstTbYOrderproduct">
					  <view class="table-content" :key="index">
						  <view>{{ item.cpmc }}</view>
						  <view><image style="width: 100%; max-height: 150rpx;" :src="item.cptpdz1" mode=""></image></view>
						  <view>{{ item.sl }}</view>
						  <view>{{item.yjdz ? item.yjdz : ''}}</view>
					  </view>
					  <template v-slot:right>
						<view class="primary-btn" @click="editPro(item, index)"><text>编辑</text></view>
						<view class="error-btn" @click="delPro(index)"><text>删除</text></view>
					  </template>
				  </uni-swipe-action-item>
			  </view>
			  <view v-else>
				  <kevy-empty :show="true" type="favor" text="没有数据哦~"></kevy-empty>
			  </view>
		  </view>
		</view>
		<view class="base_info">
			<uni-forms-item label="支付金额" >
				<uni-easyinput v-model="dataForm.yfdj" digit suffixIcon="" placeholder="请输入支付金额" />
			</uni-forms-item>
			<uni-forms-item label="支付凭证">
				<uni-easyinput v-model="dataForm.dddjpz" suffixIcon="" placeholder="请输入支付凭证">
					<template #right>
						<button type="primary" size="mini" @click="upZfpzData">上传凭证</button>
					</template>
				</uni-easyinput>
				<image v-if="dataForm.dddjtpdz" style="margin-top: 10rpx; width: 120rpx; height: 120rpx;" :src="dataForm.dddjtpdz" mode=""></image>
				<image v-if="dataForm.dddjtpdzbase64" style="margin-top: 10rpx; width: 120rpx; height: 120rpx;" :src="dataForm.dddjtpdzbase64" mode=""></image>
			</uni-forms-item>
			<uni-forms-item label="经办人员">
				<uni-easyinput v-model="dataForm.ddjbr" suffixIcon="" placeholder="请输入经办人" />
			</uni-forms-item>
			<uni-forms-item label="订单类型">
			  <uni-data-select v-model="dataForm.ddlx" placeholder="请选择订单类型" :localdata="ddlxList"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="订单渠道">
			  <uni-data-select v-model="dataForm.ddqd" placeholder="请选择订单渠道" :localdata="ddqdList"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="订单日期">
			  <uni-datetime-picker type="datetime" :clear-icon="false" placeholder="请选择订单日期" v-model="dataForm.ddrq"  />
			</uni-forms-item>
			<uni-forms-item label="订单余额">
			  <uni-easyinput v-model="dataForm.ddwkje" digit placeholder="订单余额" />
			</uni-forms-item>
			<uni-forms-item label="尾款凭证">
				<uni-easyinput v-model="dataForm.ddwkpz" suffixIcon="" placeholder="请输入尾款凭证">
					<template #right>
						<button type="primary" size="mini" @click="upWkpzData">上传凭证</button>
					</template>
				</uni-easyinput>
				<image v-if="dataForm.ddwktpdz" style="margin-top: 10rpx; width: 120rpx; height: 120rpx;" :src="dataForm.ddwktpdz" mode=""></image>
				<image v-if="dataForm.ddwktpdzbase64" style="margin-top: 10rpx; width: 120rpx; height: 120rpx;" :src="dataForm.ddwktpdzbase64" mode=""></image>
			</uni-forms-item>
			<uni-forms-item label="尾款日期">
				<uni-datetime-picker type="date" :clear-icon="false" placeholder="请选择尾款日期" v-model="dataForm.ddwkzfrq"  />
			</uni-forms-item>
			<!-- <uni-forms-item label="产品号段">
				<uni-easyinput v-model="dataForm.cphd" suffixIcon="" placeholder="请选择产品号段" />
			</uni-forms-item> -->
		</view>
	  </uni-forms>
      
	  
	  
	  <uni-drawer ref="showRight" mode="right" :mask-click="true" :width="300">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="pro_btn">
					<button type="primary" size="mini" @click="savePro">确认</button>
					<button style="float: right;" type="" size="mini" @click="$refs.showRight.close()">取消</button>
				</view>
				<view class="pro_info">
			<uni-forms ref="valiForm" :model-value="productItem" >
					<uni-forms-item label="商品名称" label-width="160rpx">
			<lin-select :list="productList" :loading="loading" loading-text="数据加载中"
					    value-key="id" name-key="cpmc" :max-height="180" @confirm="changeproduct"
					    placeholder="请输入商品名称" @input="getProData" v-model="cpmc"/>
            </uni-forms-item>
					<uni-forms-item label="购买数量" label-width="160rpx">
			<uni-easyinput v-model="productItem.sl" type="number" placeholder="请输入购买数量" />
            </uni-forms-item>
					<uni-forms-item label="邮寄姓名" label-width="160rpx">
			<uni-easyinput v-model="productItem.yjmc"  placeholder="请输入邮寄姓名" />
            </uni-forms-item>
					<uni-forms-item label="邮寄号码" label-width="160rpx">
			<uni-easyinput v-model="productItem.yjsj"  placeholder="请输入邮寄号码" />
            </uni-forms-item>
					<uni-forms-item label="邮寄地址" label-width="160rpx">
			<uni-easyinput v-model="productItem.yjdz"  placeholder="请输入邮寄地址" />
            </uni-forms-item>
			<uni-forms-item label="产品号段" label-width="160rpx">
			  <uni-easyinput v-model="productItem.cphd"  placeholder="请输入产品号段" />
			</uni-forms-item>
					<uni-forms-item label="商品图片" label-width="160rpx">
			<image class="pro_image" :src="productItem.cptpdz1" mode=""></image>
            </uni-forms-item>
			 </uni-forms>
				</view>
			</scroll-view>
	   </uni-drawer>
    </view>
  </view>
</template>

<script>
	import heardData from "../../component/heard.vue" //组件引入
    export default {
		components: { heardData },
		data () {
			return {
				dataForm: {
					khmc: '',
					khsj: '',
					khdz: '',
					fkfs: '',
					
					type: '1',
					ddbh: '',
					ddjbr: '',
					lstTbYOrderproduct: []
				},
				fkfsData: [],
				ddlxList: [],
				ddqdList: [],
				cpmc: '', // 商品名称
				loading: false,
				productList: [],
				productItem: {},
				editIndex: null
			}
		},
		onLoad (query) {
			console.log(query)
			if (query.ddbh) {
				this.getOrderInfo(query.ddbh)
			} else {
				this.getOrderInfo()
			}
		},
		created () {
			this.getWorkDropdownList()
		},
        methods: {
			addPro () {
				this.$refs.showRight.open();
				this.productItem = {}
				this.productList = []
				this.cpmc = ''
				this.editIndex = null
			},
			getWorkDropdownList () {
				this.$request('mobile/getDropdownList', 'post', [{type: '付款方式'},{type: '订单渠道'},{type: '订单类型'}]).then(res => {
					if (res.code == 200) {
						res.data.forEach(item => {
							if (item.type == '付款方式') {
								item.value.forEach(item => {
									item.value = item.dictCode
									item.text = item.dictValue
								})
								this.fkfsData = item.value
							}
							if (item.type == '订单渠道') {
								item.value.forEach(item => {
									item.value = item.dictCode
									item.text = item.dictValue
								})
								this.ddqdList = item.value
							}
							if (item.type == '订单类型') {
								item.value.forEach(item => {
									item.value = item.dictCode
									item.text = item.dictValue
								})
								this.ddlxList = item.value
							}
						})
					}
				})
			},
			getOrderInfo (ddbh) {
				let data = {yhsj: uni.getStorageSync('mobile')}
				if (ddbh) {
					data.ddbh = ddbh
				}
				this.$request('mobile/getOrderInfo', 'post', data).then(res => {
					if (res.code == 200) {
						this.dataForm = res.data.order
					}
				})
			},
			getProData (e) {
				if (e) {
					this.loading = true
					this.$request('mobile/getProNmBychannelProInfo', 'post', {yhsj: uni.getStorageSync('mobile'), cpmc: e}).then(res => {
						if (res.code == 200) {
							console.log(res)
							this.productList = res.data.productInfo
							this.loading = false
						}
					})
				}
			},
			submitData () {
				uni.showLoading({title: '保存中...'});
				let data = Object.assign({}, {yhsj: uni.getStorageSync('mobile')}, this.dataForm)
				this.$request('mobile/savUdpOrderInfo', 'post', data).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						if (res.data) {
							// 添加成功
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(() => {
								uni.navigateTo({
								    url: '/pages/adminorder/index0'
								});
							}, 2000)
						}
					} else {
						uni.showToast({title: res.msg,icon: 'none'});
					}
				})
			},
			changeproduct (e) {
				this.productList.forEach(item => {
					if (item.id == e) {
						this.productItem = item
					}
				})
			},
			savePro () {
				let that = this
				if (!this.cpmc) {
					uni.showToast({title: '请添加商品',icon: 'none'});
					return 
				}
				if (!this.productItem.sl) {
					uni.showToast({title: '请输入购买数量',icon: 'none'});
					return 
				}
				that.saveProAll()
			},
			saveProAll () {
				if (this.editIndex !== null) {
					console.log('修改')
					this.dataForm.lstTbYOrderproduct[this.editIndex] = this.productItem
				} else {
					console.log('新增')
					this.dataForm.lstTbYOrderproduct.push(this.productItem)
				}
				this.$refs.showRight.close();
			},
			editPro (item, index) {
				this.productItem = item
				this.editIndex = index
				console.log(this.editIndex)
				this.cpmc = item.cpmc
				this.$refs.showRight.open();
			},
			delPro (index) {
				this.dataForm.lstTbYOrderproduct.splice(index, 1)
			},
			goback () {
				uni.navigateTo({
				    url: '/pages/adminorder/index0'
				});
			},
			upZfpzData () {
				uni.chooseImage({
				  count: 1,
				  sizeType: 'original',
				  success: file => {
				    console.log(file);
					uni.getFileSystemManager().readFile({
					  filePath: file.tempFilePaths[0], //选择图片返回的相对路径
					  encoding: 'base64', //编码格式
					  success: res => { //成功的回调
					    console.log(res, '返回结果');
						this.dataForm.dddjtpdz = ''
						this.dataForm.dddjtpdzbase64 = 'data:image/png;base64,' + res.data
					  },
					  fail: (e) => {
					    console.log("图片转换失败");
					  }
					})
				  }
				})
			},
			upWkpzData () {
				uni.chooseImage({
				  count: 1,
				  sizeType: 'original',
				  success: file => {
				    console.log(file);
					uni.getFileSystemManager().readFile({
					  filePath: file.tempFilePaths[0], //选择图片返回的相对路径
					  encoding: 'base64', //编码格式
					  success: res => { //成功的回调
					    console.log(res, '返回结果');
						this.dataForm.ddwktpdz = ''
						this.dataForm.ddwktpdzbase64 = 'data:image/png;base64,' + res.data
					  },
					  fail: (e) => {
					    console.log("图片转换失败");
					  }
					})
				  }
				})
			}
        }
    }
</script>

<style lang="scss">
.content{
	padding-bottom: 10rpx;
}
	.base_info {
		background: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	.submit_btn {
		margin: 20rpx;
	}
	.goods {
		margin: 20rpx;
		.table {
		  .uni-table {
		    width: 100% !important;
		    min-width: auto !important;
		    .uni-table-th {
		      width: 20% !important;
		      font-size: 28rpx !important;
		    }
		  }
		}
	}
	.button-group {
		margin: 30rpx 0 20rpx;
		button {
		  width: 100%;
		  text-align: center;
		  background: #01a0fe;
		}
	}
	.goods-table {
		.heard {
			background: #e4ebf6;
		display: flex;
			text {
				 flex: 1; font-weight: 500; font-size: 26rpx;
				text-align: center; color: #909399; border: 1px solid #ebeef5; padding: 20rpx 5rpx;
				&:last-child {
					// border-right: none;
				}
			}
		}
		.table-content {
			background: #fff; display: flex;
			view {
				 font-weight: 500; font-size: 26rpx;  flex: 1;
				color: #909399; border: 1px solid #ebeef5; padding: 20rpx 5rpx; text-align: center;
				justify-content: center;
				    align-items: center;
				&:last-child {
					// border-right: none;
				}
			}
			
		}
	}
	.primary-btn {
		display: inline-flex; width: 100rpx; height: 100%; align-items: center; justify-content: center;
		color: #fff; background-color: #409eff; border-color: #409eff;
	}
	.error-btn {
		display: inline-flex; width: 100rpx; height: 100%; align-items: center; justify-content: center;
		color: #fff; background-color: #f56c6c; border-color: #f56c6c;
	}
	.pro_info {
		padding: 20rpx;
		.uni-forms-item {
			margin: 0;
		}
		.uni-easyinput {
			margin-bottom: 20rpx;
		}
		.pro_image {
			border: 1px solid #ebeef5; width: 100%;
		}
	}
	.pro_btn {
		padding: 20rpx 20rpx 0;
		
	}
	button[type=primary] {
	    background-color: #409eff;
	    color: #fff;
	}
	
</style>